<template>
  <div class="image-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- 面包屑,路径导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{"素材管理"}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="action-head">
        <el-radio-group v-model="collect" size="mediu" @change="loadImages(1)">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button size="mediu" type="success" @click="dialogUploadVisible = true">上传素材</el-button>
      </div>
      <!-- 素材列表 -->
      <el-row :gutter="15">
        <el-col
          v-for="(img,index) in images"
          :key="index"
          :md="6"
          :xs="12"
          :sm="6"
          :lg="4"
          class="image-item"
        >
          <!-- <el-image
            style="height: 100px"
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            fit="cover"
          ></el-image>-->
          <el-image style="height: 100px" :src="img.url" fit="cover"></el-image>
          <div class="imageAction">
            <el-button
              type="warning"
              :icon="img.is_collected ? 'el-icon-star-on' : 'el-icon-star-off' "
              circle
              size="small"
              @click="onCollect(img)"
              :loading="img.loading"
            ></el-button>

            <el-button type="danger" icon="el-icon-delete" circle size="small"
            @click="onDelete(img)"
            :loading="img.loading"
            ></el-button>
            <!-- <i :class="{
                  'el-icon-star-on': img.is_collected,
                  'el-icon-star-off': !img.is_collected

              }"
              @click="onCollect(img)"
            ></i>-->
            <!-- <i class="el-icon-delete"></i> -->
          </div>
        </el-col>
      </el-row>
      <!-- 数据分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalCount"
        :page-size="pageSize"
        @current-change="onPageChange"
        :current-page.sync="page"
      ></el-pagination>
    </el-card>

    <el-dialog title="上传素材" :visible.sync="dialogUploadVisible" :append-to-body="true">
      <el-upload
        v-if="dialogUploadVisible"
        :headers="uploadHeaders"
        class="upload-demo"
        drag
        action="http://127.0.0.1:8088/mp/v1_0/user/images"
        multiple
        name="image"
        :on-success="onUploadSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
import { getImages, collectImage,delImage } from "@/api/image";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    const user = JSON.parse(window.localStorage.getItem("user"));
    return {
      collect: false,
      images: [], // 图片素材列表
      dialogUploadVisible: false,
      uploadHeaders: {
        Authorization: `Bearer ${user.token}`
      },
      totalCount: 0,
      page: 1, // 当前页码
      pageSize: 10 // 每页大小
    };
  },
  computed: {},
  watch: {},
  created() {
    // 初始化加载第一页数据
    this.loadImages(1);
  },
  mounted() {},
  methods: {
    loadImages(page) {
      this.page = page;
      getImages({
        collect: this.collect,
        page,
        per_page: this.pageSize
      }).then(res => {
        console.log(res.data);
        const results = res.data.results;
        results.forEach(img => {
          img.loading = false;
        });
        this.images = res.data.results;
        this.totalCount = res.data.total_count;
      });
    },
    // onCollectChange() {
    //   this.loadImages(1);
    // },
    onUploadSuccess() {
      // 关闭对话框
      this.dialogUploadVisible = false;
      this.loadImages(this.page);
    },
    onPageChange(page) {
      // console.log(page)
      this.loadImages(page);
    },
    onCollect(img) {
      img.loading = true;
      // 收藏
      collectImage(img.id, !img.is_collected).then(res => {
        // console.log(res)
        img.is_collected = !img.is_collected;
      });
      img.loading = false;
    },
    onDelete(img) {
        img.loading = true
        delImage(img.id).then(res =>{
            // 重新加载
            this.loadImages(this.page)
        })
        img.loading = false
    }

  }
};
</script>

<style scoped lang="less">
.action-head {
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.imageAction {
  height: 40px;
  background-color: rgba(204, 204, 204, 0.4);
  position: absolute;
  bottom: 4px;
  left: 5px;
  right: 5px;
  font-size: 25px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
}
.image-item {
  position: relative;
}
</style>